<?xml version="1.0" encodling="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Test CSS and XHTML</title>
    <meta name="author" content="Jim Lehmer, FCS Financial" />
    <link type="text/css" rel="Stylesheet" media="screen" title="<link> title Normal" href="normal.css" />
    <link type="text/css" rel="Stylesheet" media="print" title="<link> title Alternate" href="alt.css" />
    <!--<script defer="defer" type="text/javascript" language="javascript" src="scripts.js"></script>-->
</head>
<body id="idBody" title="<body> title">
    <h1 title="Headings">Headings</h1>
    <h1 title="<h1> title">&lt;h1> Heading 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ornare. Sed magna. Maecenas tempor, velit ac rutrum semper, purus pede rutrum ante, quis mattis urna enim ut metus. Vestibulum placerat lacus. Nullam lacus. Integer sed augue. Duis porta scelerisque nunc. Morbi dictum. Nam ligula sem, nonummy nec, suscipit sed, ultricies non, nibh. Aliquam placerat risus. Vestibulum vitae ante vel nunc porta volutpat. Nullam augue. Morbi quis nulla sit amet enim rutrum tristique. Pellentesque lobortis placerat magna. Nunc facilisis posuere dolor.</p>
    <p>Pellentesque arcu augue, blandit id, varius ullamcorper, semper vel, dui. Donec aliquet iaculis nunc. Suspendisse vitae quam in massa dictum tincidunt. Aenean a mi. Sed sit amet quam. Integer dapibus metus ultricies tellus fringilla pellentesque. Aenean semper, tellus nec posuere congue, justo arcu auctor mi, vel adipiscing metus augue a tortor. Nam posuere. Morbi sit amet turpis. Duis nibh eros, fermentum imperdiet, porta eu, mattis vestibulum, ante. Etiam id risus vel tellus feugiat pharetra. Cras ligula orci, dignissim in, tempor vel, porta id, pede. Nunc augue velit, auctor a, posuere consectetuer, rutrum in, neque. Aenean nunc purus, auctor eget, dignissim id, volutpat non, diam. Cras lorem nisi, lacinia quis, rutrum nec, lobortis sagittis, orci. In non massa in sapien egestas viverra. Proin facilisis ante at elit.</p>
    <p>Aliquam erat volutpat. Nullam libero. Donec dui. Aliquam in urna. Vestibulum vel justo. Vestibulum rutrum mauris nec sapien. Donec eleifend, massa in ullamcorper eleifend, erat quam tristique elit, nec tincidunt elit quam eu nunc. Ut nunc ligula, rhoncus non, facilisis ut, pellentesque in, turpis. Fusce vulputate tellus. Aenean blandit, ligula at nonummy lacinia, justo mi varius erat, a dignissim tellus leo eu nisi. Aenean eros est, ullamcorper in, hendrerit ac, mollis a, quam. Nam ligula. Sed interdum, sem id sollicitudin dictum, nunc enim mollis nulla, posuere tempus ante nibh sed nibh. Mauris sagittis ipsum sed elit. Fusce orci. Nam quis mi vulputate lorem euismod rutrum. Maecenas magna elit, semper vitae, condimentum non, euismod id, lectus. Curabitur sem arcu, rutrum ullamcorper, euismod mollis, vehicula vel, sem. Curabitur nec leo et justo auctor iaculis.</p>
    <p>Proin semper dolor ut libero. Sed quis neque. Duis lobortis eros a nibh. Sed ac lectus. Aliquam erat volutpat. Vestibulum dignissim mollis est. Donec aliquet consectetuer odio. Vivamus non magna. Proin porta turpis et leo. Vestibulum dignissim, est ut aliquet blandit, tortor massa adipiscing metus, vel venenatis mi turpis a sapien. Praesent porttitor venenatis nisl. Fusce nunc. Nunc at mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
    <p>Praesent adipiscing, pede quis rutrum dictum, arcu elit dapibus mauris, bibendum interdum urna sapien sit amet tellus. Sed laoreet. Nulla molestie, lectus sed viverra mollis, ipsum orci eleifend enim, ut aliquet purus nunc nec orci. Morbi suscipit erat quis erat. Cras imperdiet. Praesent et quam id ipsum consequat rutrum. Quisque lacus. Proin lorem lectus, lobortis at, tristique et, semper luctus, mauris. Mauris arcu risus, interdum nec, consequat nec, scelerisque vel, neque. Aliquam eros. Etiam quis tortor sed sapien gravida malesuada. Sed id magna. Sed mattis, nisi in bibendum tempus, augue lectus vehicula purus, non sagittis erat enim vel mauris. Donec vitae leo. Vestibulum ipsum. Vestibulum sed eros. Nulla quis mi. In in nisi ut lacus malesuada eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ac arcu.</p>
    <h2 title="<h2> title">&lt;h2> Heading 2</h2>
    <h3 title="<h3> title">&lt;h3> Heading 3</h3>
    <h4 title="<h4> title">&lt;h4> Heading 4</h4>
    <h5 title="<h5> title">&lt;h5> Heading 5</h5>
    <h6 title="<h6> title">&lt;h6> Heading 6</h6>
    <hr title="<hr> title" />
    <h1 title="Inline Elements">Inline Elements</h1>
    <p>  
        <a href="http://www.dullroar.com/" title="<a> title">&lt;a> is an anchor (external hyperlink)</a><br /><br />
        <a href="#there" title="<a> title">&lt;a> is an anchor (internal hyperlink)</a><br /><br />
        <abbr title="<abbr> title">&lt;abbr> is for abbreviations like FORTRAN (see also &lt;acronym>)</abbr><br /><br />
        <acronym title="<acronym> title">&lt;acronym> is for acronyms like FCS (see also &lt;abbr>)</acronym><br /><br />
        <b title="<b> title">&lt;b> is for bold text (deprecated, replaced by &lt;strong>, see also &lt;i>)</b><br /><br />
        <big title="<big> title">&lt;big> is for big text (see also &lt;small>)</big><br /><br />
        &lt;br> is a line break - this is before the break<br title="<br> title" />And this is after the break<br /><br />
        <cite title="<cite> title">&lt;cite> is for citations, like "Mad Magazine"</cite><br /><br />
        <code title="<code> title">&lt;code> InLineCodeSnippet()</code><br /><br />
        <del title="<del> title">&lt;del> is for deleted (struck through) text (see also &lt;ins>)</del><br /><br />
        <em title="<em> title">&lt;em> is for emphasized text (replaces &lt;i>, see also &lt;strong>)</em><br /><br />
        <i title="<i> title">&lt;i> is for italic text (deprecated, replaced by &lt;em>, see also &lt;b>)</i><br /><br />
        &lt;img> is to embed an image: <img alt="<img> alt" title="<img> title" src="face.gif" /><br /><br />
        <ins title="<ins> title">&lt;ins> is for inserted text (see also &lt;del>)</ins><br /><br />
        <kbd title="<kbd> title">&lt;kbd> is for "keyboard" text (see also &lt;tt>)</kbd><br /><br />
        <dfn title="<dfn> title">&lt;dfn> is for a definition</dfn><br /><br />
        <q title="<q> title">&lt;q> is an inline quotation (unlike &lt;blockquote>, which is a block element)</q><br /><br />
        <samp title="<samp> title">&lt;samp> is for sample text</samp><br /><br />
        <small title="<small> title">&lt;small> is for small text (see also &lt;big>)</small><br /><br />
        <strong title="<strong> title">&lt;strong> is for strong text (replaces &lt;b>, see also &lt;em>)</strong><br /><br />
        <sub title="<sub> title">&lt;sub> is for subscripted text (see also &lt;sup>)</sub><br /><br />
        <sup title="<sup> title">&lt;sup> is for superscripted text (see also &lt;sub>)</sup><br /><br />
        <tt title="<tt> title">&lt;tt> is for "typewritten" text (see also &lt;kbd>)</tt><br /><br />
        <var title="<var> title">&lt;var> is for variable or substituted text</var><br /><br />
        <a id="#there" title="<a> title">&lt;a> is an anchor (target of internal hyperlink)</a>
    </p>
    <hr title="<hr> title" />
    <h1 title="Block Elements">Block Elements</h1>
    <div>
    <p title="<p> title">&lt;p> This is a paragraph.</p>
&lt;address> The following is a sig-style address: <address title="<address> title">Jim Lehmer, <a href="mailto:jim.lehmer@myfcsfinancial.com" title="<a> title">jim.lehmer@myfcsfinancial.com</a></address><br />
&lt;blockquote> The following is block quoted text:<blockquote title="<blockquote> title">"What, me worry?"<br />- Alferd E. Newman</blockquote><br />
&lt;div> The following is a div: <div title="<div> title">Some text goes here</div><br />
&lt;pre> The following is preformatted text: <pre title="<pre> title">This is a preformatted line
  And so is this.
  Note no need for &lt;br> - the line breaks and indenting spaces are preserved.</pre>
  </div>
  <hr title="<hr> title" />
  <h1 title="List Elements">List Elements</h1>
    <dl title="<dl> title">
        <dt title="<dt> title">&lt;dt> Name</dt>
        <dd title="<dd> title">&lt;dd> Definition of name</dd>
        <dt title="<dt> title">&lt;dt> Value</dt>
        <dd title="<dd> title">&lt;dd> Definition of value</dd>
        <dt title="<dt> title">&lt;dt> Pair</dt>
        <dd title="<dd> title">&lt;dd> Definition of pair</dd>
    </dl>
    <ol title="<ol> title">
        <li title="<li> title">&lt;li> First item</li>
        <li title="<li> title">&lt;li> Second item</li>
        <li title="<li> title">&lt;li> Third item</li>
    </ol>
    <ul title="<ul> title">
        <li title="<li> title">&lt;li> First item</li>
        <li title="<li> title">&lt;li> Second item</li>
        <li title="<li> title">&lt;li> Third item</li>
    </ul>
    <hr title="<hr> title" />
    <h1 title="Tables">Tables</h1>
    <table title="<table> title">
        <caption title="<caption> title">&lt;caption> Sample table</caption>
        <colgroup title="<colgroup> title">
            <col title="<col> title" width="50" />
            <col title="<col> title" width="75" />
            <col title="<col> title" width="100" />
        </colgroup>
        <thead title="<thead> title">
            <tr title="<tr> title">
                <th title="<th> title">&lt;th> Col 1</th>
                <th title="<th> title">&lt;th> Col 2</th>
                <th title="<th> title">&lt;th> Col 3</th>
            </tr>
        </thead>
        <tbody title="<tbody> title">
            <tr title="<tr> title">
                <td title="<td> title">&lt;td> R1C1</td>
                <td title="<td> title">&lt;td> Row1Col2</td>
                <td title="<td> title">&lt;td> Row 1 Column 3</td>
            </tr>
            <tr title="<tr> title">
                <td title="<td> title">&lt;td> R2C1</td>
                <td title="<td> title">&lt;td> Row2Col2</td>
                <td title="<td> title">&lt;td> Row 2 Column 3</td>
            </tr>
            <tr title="<tr> title">
                <td title="<td> title">&lt;td> R3C1</td>
                <td title="<td> title">&lt;td> Row3Col2</td>
                <td title="<td> title">&lt;td> Row 3 Column 3</td>
            </tr>
        </tbody>
        <tfoot title="<tfoot> title">
            <tr title="<tr> title">
                <td title="<td> title">&lt;td> Foot 1</td>
                <td title="<td> title">&lt;td> Foot 2</td>
                <td title="<td> title">&lt;td> Foot 3</td>
            </tr>
        </tfoot>
    </table>
    <hr title="<hr> title" />
    <h1 title="Forms">Forms</h1>
    <form title="<form> title" action="Test.htm">
        <fieldset title="<fieldset> title">
            <legend title="<legend> title">&lt;legend> Set of Fields</legend>
            <label title="<label> title">&lt;label> Input field: </label>
            <input title="<input> title" name="inputField1" type="text" maxlength="20" value="<input> value" /><br />
            <label title="<label> title">&lt;label> Select field: </label>
            <select title="<select> title" name="selectField1" size="3" multiple="multiple">
                <optgroup label="<optgroup> label 1" title="<optgroup> title">
                    <option label="<option> label 1" title="<option> title" value="<option> value 1">&lt;option> 1</option>
                    <option label="<option> label 2" title="<option> title" value="<option> value 2">&lt;option> 2</option>
                    <option label="<option> label 3" title="<option> title" value="<option> value 3">&lt;option> 3</option>
                </optgroup>
                <optgroup label="<optgroup> label 2" title="<optgroup> title">
                    <option label="<option> label 4" title="<option> title" value="<option> value 4">&lt;option> 4</option>
                    <option label="<option> label 5" title="<option> title" value="<option> value 5">&lt;option> 5</option>
                    <option label="<option> label 6" title="<option> title" value="<option> value 6">&lt;option> 6</option>
                </optgroup>
            </select><br />
            <label title="<label> title">&lt;label> Text area: </label>
            <textarea name="textArea1" title="<textarea> title" rows="5" cols="50">&lt;textarea> Enter something here.</textarea><br />
            <button id="idButton1" name="<button> name" title="<button> title" value="<button> value">&lt;button> OK</button>
        </fieldset>
    </form>    
    <hr title="<hr> title" />
    <h1 title="Other Stuff">Other Stuff</h1>
    <p>Demonstration of an image map - click on different parts of the face:
        <img alt="<img> alt" title="<img> title" src="face.gif" usemap="#map1"/>
        <map title="<map> title" id="map1">
            <area title="<area> title Eyes" alt="<area> alt Eyes" href="javascript:alert('You clicked on the eyes')" shape="rect" coords="33,33,52,42" />
            <area title="<area> title Smile" alt="<area> alt Smile" href="javascript:alert('You clicked on the smile')" shape="rect" coords="31,44,54,53" />
            <area title="<area> title Face" alt="<area> alt Face" href="javascript:alert('You clicked on the face')" shape="circle" coords="43,43,27" />
            <area title="<area> title Out of Bounds" alt="<area> alt Out of bounds" nohref="nohref" shape="rect" coords="0,0,87,87" />
         </map>
    </p>
    <noscript title="<noscript> title">&lt;noscript> This is what you see if scripting is off.</noscript>
    <p>Test classes:<span class="class1">Class 1. <span class="class2">Class 2.</span></span></p>
</body>
</html>
